<script setup lang="ts">
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { useLayoutState } from '../../basic-layout/context'
import GlobalHeaderLogo from './global-header-logo.vue'
import { api_getOffOrLineInfo, api_getTime, api_getWeatherChartData, api_getWeatherInfo } from '~@/api/common/home.module'
import { onMounted, onUpdated } from 'vue'

const curDate = ref('')
const weatherInfo = ref('')

const allTotal = ref('')
const offTotal = ref('')
const lineTotal = ref('')

async function getTime() {
  // 时间
  await api_getTime().then((res) => {
    if (res.data.isSuccess) {
      const { systemDate, systemTime } = res.data.result
      curDate.value = `${systemDate} ${systemTime}`
    }
  })

  // 天气
  await api_getWeatherInfo().then((res) => {
    if (res.data.isSuccess) {
      const { city, type, fengxiang, high, low } = res.data.result
      weatherInfo.value = `${city}    ${type}    ${fengxiang}    最高 ${high}°C     最低 ${low}°C `
    }
  })

  // 天气图表
  await api_getWeatherChartData().then((res) => {
    if (res.data.isSuccess) {
      const { xLabel, yData } = res.data.result
    }
  })

  // 全部阀门相关信息
  await api_getOffOrLineInfo().then((res) => {
    if (res.data.isSuccess) {
      const { onLine, offLine, total } = res.data.result
      allTotal.value = total
      offTotal.value = offLine
      lineTotal.value = onLine
    }
  })
}

onMounted(() => {
  getTime()
})


onUpdated(() => {
  getTime()
})



const { layout, isMobile, handleMobileCollapsed, theme, menuHeader, collapsed, handleCollapsed, leftCollapsed }
  = useLayoutState()
const prefixCls = shallowRef('ant-pro-global-header')
const cls = computed(() => ({
  [prefixCls.value]: true,
  [`${prefixCls.value}-layout-${layout.value}`]: !!layout.value,
  [`${prefixCls.value}-inverted`]: theme.value === 'inverted' && layout.value === 'top',
}))
</script>

<template>
  <!--  #f0f2f5 -->
  <!-- #f0f2f5 -->
   <!-- rgb(226, 226, 226) -->
  <div :class="[cls]" style="background: #f0f2f5; box-shadow: 0 0 10px rgba(255, 255, 255, .3);">
    <!-- <span
      v-if="layout === 'side' && !isMobile && !leftCollapsed" class="ml-0 text-18px"
      @click="handleCollapsed?.(!collapsed)"
    >
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </span> -->

    <a-flex>
      <div v-if="allTotal" style="display: flex; align-items: center; overflow: hidden;">
        <img src="@/assets/images/a.png" class="img">
        <span style="font-size: 12px;">改造公建共计 <i style="font-size: 16px;"> &nbsp;{{ allTotal }}</i> 个</span>

        <img src="@/assets/images/a1.png" class="img img01">
        <span style="font-size: 12px;">在线公建共计 <i style="font-size: 16px;"> &nbsp;{{ lineTotal }}</i> 个</span>

        <img src="@/assets/images/a2.png" class="img img01">
        <span style="font-size: 12px;">离线公建共计 <i style="font-size: 16px;"> &nbsp;{{ offTotal }}</i> 个</span>
      </div>
    </a-flex>



    <span v-if="isMobile" class="ant-pro-global-header-collapsed-button" @click="handleMobileCollapsed">
      <MenuFoldOutlined />
    </span>
    <div class="flex-1" :class="layout === 'top' ? `${prefixCls}-top` : 'overflow-x-auto'">
      <slot name="headerContent" />
    </div>
    <!-- margin-right: 20px; -->
    <div v-if="weatherInfo" style=" font-size: 14px; overflow: hidden;">
      <img src="@/assets/images/t01.png" class="base-img">
      <i> {{
        `${weatherInfo}`
        }}</i>
    </div>
    <!-- <a-space align="center" flex-shrink-0>
      <slot name="headerActions" />
    </a-space> -->
  </div>
</template>

<style lang="less">
@import './index.less';

@keyframes ro {
  0% {
     transform: rotate(0deg);
  }

  100% {
     transform: rotate(360deg);
  }
}
//   animation: ro 3s linear infinite;

.img {
  width: 23px;
  height: 23px;
  display: inline-block;
  margin-left: 0px;
  margin-right: 3px;
}

.img01 {
  margin-left: 20px;
  animation: ro 3s linear infinite;

}

.base-img {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 10px;
  position: relative;
  top: 3px;
  right: -3px;
}
</style>
